<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8"/>
<title>CIM Webclient for protobuf</title>
        <link rel="shortcut icon" href="/image/favicon.ico" type="image/x-icon">
		<link charset="utf-8" rel="stylesheet" 	href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
		<link charset="utf-8" rel="stylesheet" href="/css/common.css" />
		<script type="text/javascript" 	src="/js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="/js/common.js"></script>
		<script type="text/javascript" src="/js/cim/message.js"></script>
		<script type="text/javascript" src="/js/cim/replybody.js"></script>
		<script type="text/javascript" src="/js/cim/sentbody.js"></script>
		<script type="text/javascript" src="/js/cim/cim.web.sdk.js"></script>
</head>


<script> 

   /***********************************推送配置开始**************************/
   
   /**  当socket连接成功回调 **/
   function onConnectFinished(){
	   CIMPushManager.bind($('#account').val());
   }
   
   /** 当收到请求回复时候回调  **/
   function onReplyReceived(reply)
   {
	 console.log(reply);
	   if (reply.key === KEY_CLIENT_BIND && reply.code === CODE_OK) {
		   hideProcess();

		   $('#LoginDialog').fadeOut();

		   $('#MessageDialog').fadeIn();
		   $('#MessageDialog').addClass("in");
		   $("#current_account").text($('#account').val());

	   }

	   /**
		* 链接鉴权失败
		*/
	   if(reply.key === KEY_HANDSHAKE && reply.code === CODE_UNAUTHORIZED){
		   hideProcess();
		   showETip("鉴权失败");
	   }

   }
   
   /** 当收到消息时候回调  **/
   
   function onMessageReceived(message)
   { 
	   console.log(message);
       /*
        账户在其他地方登录了
        */
	   if(message.action === ACTION_999){
	       $('#MessageDialog').fadeOut();
		   $('#LoginDialog').fadeIn();
	       $('#LoginDialog').addClass("in");
		   return ;
	   }
	   
	   showNotification(message.content);
	   var time = new Date(message.timestamp).toLocaleString();
       $("#messageList").prepend("<div class='alert alert-info' >"+time+"</p></p>"+message.content+"</div>");
   }
   
   
   /***********************************推送配置结束**************************/

   
    
   /***********************************业务配置开始**************************/
    
    function doLogin(){
    	
		    if($.trim($('#account').val()) =='' ){
		       return;
		    }
		    showProcess('正在接入请稍后......');
		    /**登录成功后创建连接****/
		    CIMPushManager.connect();
	}
   
   
   
    $(document).ready(function(){
    	$('#LoginDialog').fadeIn();
        $('#LoginDialog').addClass("in");
		$('#host').val(CIM_HOST);
		$('#port').val(CIM_PORT);
		initNotification();
    });
    
    
    function initNotification(){
    	//判断浏览器是否支持桌面通知
    	if (window.Notification) {
    	    var notification = window.Notification;
    	    if (notification.permission == "default") {
    	    	 notification.requestPermission(function(permission) {
     	        });
    	    }
    	}
    }
    
    function showNotification(msg){
    	var notify = new Notification("系统消息", {
    	        body: msg,
    	        icon: '/image/icon.png',
    	        tag: 1
    	});
    	
    	notify.onshow = function() {
    	        setTimeout(function() {
    	        	notify.close();
    	        }, 3000);
    	}
    }
    
   /***********************************业务配置结束**************************/
</script>
 

<body style="width: 600px;">


 <div class="modal fade" id="LoginDialog" tabindex="-1" role="dialog" data-backdrop="static">
 <div class="modal-dialog" style="width: 400px;margin: 64px auto;">
		<div class="modal-content" >
			<div class="modal-body" style="padding:0px;" >
            <div  style="height:200px;text-align: center; background: #5FA0D3; color: #ffffff; border: 0px; border-top-left-radius: 4px; border-top-right-radius: 4px;">
	        <img src="/image/icon.png" style="height: 72px;width: 72px;margin-top:40px;"/>
	        <div style="margin-top: 20px; color: #ffffff;font-size: 16px;">请输入一个帐号用于登录，随后接收推送消息</div>
 		    </div>
		   
	        	<div class="input-group" style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
	        	  <span class="input-group-addon">账号</span>
				  <input type="text" class="form-control" id="account" maxlength="32" placeholder="帐号（数字或者英文字母）"
					style="display: inline; width: 100%; height: 50px;" />
				</div>


				<div class="alert alert-success" role="alert" style="margin: 0 10px;">
					cim.web.sdk.js中设置cim服务的IP(域名)和端口
				</div>

				<div class="input-group" style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
					<span class="input-group-addon">host</span>
					<input type="text" class="form-control" id="host" maxlength="32" readonly = "readonly"
						   style="display: inline; width: 100%; height: 50px;" />
				</div>

				<div class="input-group" style="margin-top: 30px;margin-left:10px;margin-right:10px;margin-bottom:30px;">
					<span class="input-group-addon">port</span>
					<input type="text" class="form-control" id="port" maxlength="32" readonly = "readonly"
						   style="display: inline; width: 100%; height: 50px;" />
				</div>
			</div>
			<div class="modal-footer" style="text-align: center;">
				<a type="button" class="btn btn-success btn-lg" onclick="doLogin()"
					style="width: 300px;">登录</a>
			</div>
      </div>
      </div>
</div>

<!-- 消息提示页面 -->
 <div class="modal fade" data-backdrop="static" id="MessageDialog" tabindex="-1" role="dialog" >
	 <div class="alert alert-success" role="alert">
		 通过<a href="/console/session/list" class="alert-link" target="_blank" >控制台</a>或者<a href="/swagger-ui/index.html" target="_blank"  class="alert-link">调用接口</a>发送消息
	 </div>
 <div class="modal-dialog" style="width: 720px;margin: 30px auto;">
		<div class="modal-content" >
		 <div class="modal-header" style="text-align: center;">
				<span style="float: left;">消息显示面板</span>
				<span style="float: right;color: #4caf50;">当前帐号：<span id="current_account"></span></span>
			</div>
			<div class="modal-body" id="messageList" style="min-height: 600px;" >
		    </div>
      </div>
      </div>
</div>

</body>
</html>